<template>
    <div>
        <div class="container" v-show="!dialogVisible">
            <div class="handle-box">
                <el-row>
                    <el-col :span="16">
                        <div class="grid-content">
                            <el-button
                                type="primary"
                                icon="el-icon-plus"
                                class="mr10"
                                @click="showCreateDialog"
                            >添加</el-button>
                            <el-button type="danger" icon="el-icon-delete" class="mr10">删除</el-button>
                            <!-- <el-input
                                v-model="select_word"
                                placeholder="筛选关键词"
                                class="handle-input mr10"
                            ></el-input>-->
                            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content" style="text-align:end">
                            <el-button type="primary" plain >保存</el-button>
                            <el-button type="primary" plain >导出</el-button>
                            <el-button type="primary" plain>过账</el-button>
                            <el-button type="primary" plain>冲销</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="handle-box-title">
                <el-row>
                    <el-col :span="16">
                        <div class="grid-content">
                            <span class="title">凭证列表</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content" style="text-align:end">
                            <el-button type="primary">下载模板</el-button>
                            <el-button type="primary">模板导入</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <el-table
                ref="multipleTable"
                :data="vouchers"
                stripe
                v-loading="loading"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="凭证号" width="300">
                    <template slot-scope="scope">{{ scope.row.voucherId }}</template>
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="类别"
                    :filters="[{text:'新建', value:'新建'}, {text:'收入转移', value:'收入转移'}, {text:'费用转移', value:'费用转移'}]"
                    :filter-method="filterHandler"
                ></el-table-column>
                <el-table-column prop="amount" label="金额" sortable></el-table-column>
                <el-table-column
                    prop="currency"
                    label="币种"
                    :filters="[{text:'人民币', value:'人民币'}, {text:'美元', value:'美元'}]"
                    :filter-method="filterHandler"
                ></el-table-column>
                <el-table-column
                    prop="state"
                    label="状态"
                    :filters="[{text:'已过账', value:'已过账'}, {text:'未过账', value:'未过账'}]"
                    :filter-method="filterHandler"
                >
                    <template slot-scope="scope">
                        <el-tag
                            :type="scope.row.state === '已过账' ? 'info' : 'danger'"
                            disable-transitions
                        >{{scope.row.state}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="日期" prop="date" sortable width="120"></el-table-column>
            </el-table>
        </div>

        <!--新建界面-->
        <div class="container" v-show="dialogVisible">
            <div class="handle-box">
                <el-row>
                    <el-col :span="16">
                        <div class="grid-content">
                            <el-button
                                type="primary"
                                icon="el-icon-back"
                                class="mr10"
                                @click="backToList"
                            >返回凭证列表</el-button>
                            <!-- <el-button type="danger" icon="el-icon-delete" class="mr10">删除</el-button> -->
                            <!-- <el-input
                                v-model="select_word"
                                placeholder="筛选关键词"
                                class="handle-input mr10"
                            ></el-input>-->
                            <!-- <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button> -->
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content" style="text-align:end">
                            <el-button type="primary" plain @click="saveVouchers">保存</el-button>
                            <el-button type="primary" plain :disabled="!enableBtnFunction">导出</el-button>
                            <el-button type="primary" plain :disabled="!enableBtnFunction">过账</el-button>
                            <el-button type="primary" plain :disabled="true">冲销</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <!--新建弹框-->
            <!-- <el-dialog title="新建凭证" :visible.sync="dialogVisible" fullscreen> -->
            <el-row class="create-button-box">
                <el-col :span="6" :offset="18" style="text-align:end">
                    <el-button type="primary" class="mr10">下载模板</el-button>
                    <el-button type="primary" class="mr10">模板导入</el-button>
                </el-col>
            </el-row>
            <!-- <el-form ref="form" :model="form" label-width="80px"> -->
            <el-form ref="form" label-width="80px">
                <el-row :gutter="20">
                    <el-col :span="6" :offset="rowOffset">
                        <el-form-item label="说明">
                            <el-input :value="mainVoucherInfo.note"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="公司">
                            <el-input disabled :value="mainVoucherInfo.companyName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="原币币种">
                            <el-select
                                @change="exchangeRateChange"
                                v-model="mainVoucherInfo.baseMoney"
                                style="width:100%"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in exchangeRates"
                                    :key="item.code"
                                    :label="item.name"
                                    :value="item.code"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="6" :offset="rowOffset">
                        <el-form-item label="账期">
                            <el-select
                                value-key="id"
                                v-model="mainVoucherInfo.accountPeriod"
                                style="width:100%"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in accountPeriods"
                                    :key="item.id"
                                    :label="item.remark"
                                    :value="item"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="凭证类别">
                            <el-input disabled :value="mainVoucherInfo.certificateType"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="汇率">
                            <el-input disabled :value="mainVoucherInfo.exchange"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="6" :offset="rowOffset">
                        <el-form-item label="日期">
                            <el-date-picker
                                v-model="mainVoucherInfo.createdAt"
                                style="width:100%"
                                type="date"
                                placeholder="选择日期"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="凭证编号">
                            <el-input disabled :value="mainVoucherInfo.serial"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="借项">
                            <el-input disabled :value="mainVoucherInfo.lendAmount"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="6" :offset="rowOffset">
                        <el-form-item label="制单人">
                            <el-input disabled :value="mainVoucherInfo.createdBy"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="审核人">
                            <el-input disabled :value="mainVoucherInfo.auditBy"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="贷项">
                            <el-input disabled :value="mainVoucherInfo.loanAmount"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div class="handle-box-title">
                <el-row>
                    <el-col :span="16">
                        <div class="grid-content">
                            <span class="title">凭证列表</span>
                        </div>
                    </el-col>
                </el-row>
                <el-table
                    :data="detailVouchers"
                    style="width: 100%"
                    @row-dblclick="showDetailDialog"
                    :header-cell-style="{'text-align':'center'}"
                >
                    <el-table-column type="index" width="50" fixed></el-table-column>
                    <el-table-column prop="accountTitle.name" min-width="150" label="会计科目"></el-table-column>
                    <el-table-column label="借项">
                        <el-table-column prop="originalCurrency" :formatter="showLendCurrency" label="原币"></el-table-column>
                        <el-table-column prop="name" label="本位币"></el-table-column>
                    </el-table-column>
                    <el-table-column label="贷项">
                        <el-table-column prop="originalCurrency" :formatter="showLoanCurrency" label="原币"></el-table-column>
                        <el-table-column prop="name" label="本位币"></el-table-column>
                    </el-table-column>
                    <el-table-column prop="accountCalculation" min-width="150" label="核算科目"></el-table-column>
                    <el-table-column prop="department" min-width="150" label="部门"></el-table-column>
                    <el-table-column prop="employee.domainName" label="员工"></el-table-column>
                    <el-table-column prop="product" min-width="150" label="产品"></el-table-column>
                    <el-table-column prop="budgetarySubject" min-width="150" label="预算项目"></el-table-column>
                    <el-table-column prop="project" min-width="150" label="项目"></el-table-column>
                    <el-table-column prop="valueChain" label="价值链"></el-table-column>
                    <el-table-column prop="region" min-width="150" label="区域"></el-table-column>
                    <el-table-column prop="customerGroup" label="客户群"></el-table-column>
                    <el-table-column prop="cashFlow" label="现金流"></el-table-column>
                    <el-table-column prop="note" min-width="150" label="说明"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="60">
                        <template slot-scope="scope">
                            <el-button
                                @click="handleClick(scope.row)"
                                type="danger"
                                icon="el-icon-delete"
                                size="small"
                                v-show="scope.$index != detailVouchers.length - 1"
                            ></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>-->
            <!-- </el-dialog> -->
            <!--新建详情弹窗-->
            <el-dialog title="新建凭证" :visible.sync="detailDialogVisible" width="60%">
                <el-form ref="form" :model="selectedDetailVoucherInfo" label-width="80px">
                    <el-row :gutter="20">
                        <el-col :span="9" :offset="rowOffset">
                            <el-form-item label="会计科目">
                                <el-select
                                    v-model="selectedDetailVoucherInfo.accountTitle"
                                    value-key="code"
                                    style="width:100%"
                                    filterable
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in accountTitles"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="项目">
                                <el-select
                                    v-model="selectedDetailVoucherInfo.project"
                                    style="width:100%"
                                    filterable
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in projects"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="9" :offset="rowOffset">
                            <el-form-item label="核算科目">
                                <el-select
                                    v-model="selectedDetailVoucherInfo.accountCalculation"
                                    style="width:100%"
                                    filterable
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in accountCalculations"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="价值链">
                                <el-select
                                    v-model="selectedDetailVoucherInfo.valueChain"
                                    style="width:100%"
                                    filterable
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in valueChains"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="9" :offset="rowOffset">
                            <el-form-item label="部门">
                                <el-input disabled v-model="selectedDetailVoucherInfo.department"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="区域">
                                <el-select
                                    v-model="selectedDetailVoucherInfo.region"
                                    style="width:100%"
                                    filterable
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in regions"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="9" :offset="rowOffset">
                            <el-form-item label="员工">
                                <el-input
                                    placeholder="请输入内容"
                                    v-model="selectedDetailVoucherInfo.employeeAccount"
                                    class="input-with-select"
                                >
                                    <el-button
                                        slot="append"
                                        :loading="employeeSearching"
                                        @click="searchEmployee"
                                        icon="el-icon-search"
                                    ></el-button>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="客户群">
                                <el-select
                                    v-model="selectedDetailVoucherInfo.customerGroup"
                                    style="width:100%"
                                    filterable
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in customerGroups"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="9" :offset="rowOffset">
                            <el-form-item label="产品">
                                <el-select
                                    v-model="selectedDetailVoucherInfo.product"
                                    style="width:100%"
                                    filterable
                                    allow-create
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in products"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="现金流">
                                <el-select
                                    v-model="selectedDetailVoucherInfo.cashFlow"
                                    style="width:100%"
                                    filterable
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in cashFlows"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="9" :offset="rowOffset">
                            <el-form-item label="借/贷">
                                <el-select
                                    v-model="selectedDetailVoucherInfo.category"
                                    value-key="code"
                                    style="width:100%"
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in categories"
                                        :key="item.code"
                                        :label="item.name"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="预算项目">
                                <el-select
                                    v-model="selectedDetailVoucherInfo.budgetarySubject"
                                    style="width:100%"
                                    filterable
                                    placeholder="请选择"
                                >
                                    <el-option
                                        v-for="item in budgetarySubjects"
                                        :key="item"
                                        :label="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="9" :offset="rowOffset">
                            <el-form-item label="金额">
                                <el-input-number
                                    controls-position="right"
                                    :precision="2"
                                    :step="0.1"
                                    :min="0"
                                    v-model="selectedDetailVoucherInfo.originalCurrency"
                                    style="width:100%"
                                ></el-input-number>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="说明">
                                <el-input type="textarea" v-model="selectedDetailVoucherInfo.note"></el-input>
                                <!-- <el-input type="textarea" v-model=""></el-input> -->
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button @click="cancelDetailClick">取 消</el-button>
                    <el-button type="primary" @click="confirmDetailClick">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script scoped>
export default {
    data: function() {
        return {
            vouchers: [],
            detailVouchers: [],

            rowOffset: 3, // 详细信息界面每一行的偏移
            multipleSelection: [],
            loading: false, // 表格数据加载
            dialogVisible: false, // 是否显示新建凭证弹出框
            detailDialogVisible: false, // 是否显示新建凭证弹出框
            enableBtnFunction: false, // 是否启用冲销，导出等按钮
            // 创建凭证主表对象
            mainVoucherInfo: {
                note: "", // 说明
                companyName: "", // 企业
                baseMoney: "", // 币种
                exchange: "", // 汇率
                accountPeriod: { id: -1, remark: "" }, // 账期
                certificateType: "新建", // 类别
                createdAt: "", //  创建日期
                serial: "", // 凭证编号
                lendAmount: 0, // 借项金额
                loanAmount: 0, // 贷项金额
                createdBy: "",
                auditBy: "" // 审核人
            },
            detailVoucherInfo: {
                accountTitle: null,
                project: null,
                accountCalculation: null,
                valueChain: null,
                region: null,
                customerGroup: null,
                product: null,
                cashFlow: null,
                category: null,
                budgetarySubject: null,
                originalCurrency: null,
                note: "",
                employee: null,
                employeeAccount: "",
                department: ""
            },
            employeeSearching: false,
            selectedDetailVoucherInfo: {},
            selectedDetailVoucherIndex: -1,
            // 汇率列表
            exchangeRates: [],
            // 账期列表
            accountPeriods: [],
            // 会计科目列表
            accountTitles: [],
            // 项目列表
            projects: [],
            // 核算科目列表
            accountCalculations: [],
            // 价值链
            valueChains: [],
            // 区域
            regions: [],
            // 客户群
            customerGroups: [],
            // 产品
            products: [],
            // 现金流
            cashFlows: [],
            // 借/贷
            categories: [
                { code: "lend", name: "借" },
                { code: "loan", name: "贷" }
            ],
            // 预算科目
            budgetarySubjects: []
        };
    },
    mounted() {
        this.inited();
    },
    methods: {
        inited() {
            var _this = this;
            _this.$axios
                .get("/account/info", {
                    validateStatus: function(status) {
                        return status == 200;
                    }
                })
                .then(function(response) {
                    var body = response.data;
                    if (body.code == 200) {
                        var accountInfo = body.data;
                        _this.mainVoucherInfo.companyName =
                            accountInfo.currentUser.company.name;
                        _this.mainVoucherInfo.createdBy =
                            accountInfo.currentUser.displayName;
                        _this.exchangeRates = accountInfo.exchangeRate;
                        if (_this.exchangeRates.length > 0) {
                            _this.mainVoucherInfo.baseMoney =
                                _this.exchangeRates[0].code;
                            _this.mainVoucherInfo.exchange =
                                _this.exchangeRates[0].rate;
                        }
                        _this.accountPeriods = accountInfo.accountPeriod;
                        if (_this.accountPeriods.length > 0) {
                            _this.mainVoucherInfo.accountPeriod =
                                _this.accountPeriods[0];
                        }
                        _this.mainVoucherInfo.createdAt = new Date();

                        // 详细数据
                        _this.accountTitles = accountInfo.accountTitls; // 拼写错误
                        _this.projects = accountInfo.project;
                        _this.accountCalculations =
                            accountInfo.accountCalculation;
                        _this.valueChains = accountInfo.valueChain;
                        _this.regions = accountInfo.region;
                        _this.customerGroups = accountInfo.customerGroup;
                        _this.products = accountInfo.product;
                        _this.cashFlows = accountInfo.cashFlow;
                        _this.budgetarySubjects = accountInfo.budgetarySubject;

                        _this.detailVouchers.push(_this.detailVoucherInfo);
                    }
                    console.log(response);
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
        showLendCurrency(row, column){
            if (row.category == null || row.category.code != 'lend') {
                 return "";
            }
            
            return row.originalCurrency;
          
        },
        showLoanCurrency(row, column){
            if (row.category == null || row.category.code != 'loan') {
                 return "";
            }
            
            return row.originalCurrency;
        },
        // 回到列表
        backToList() {
            this.dialogVisible = false;
        },
        // 保存凭证信息
        saveVouchers() {
            // TODO 没有添加任何一条详细信息或者借贷金额都为0时是否需要保存
            if (
                this.mainVoucherInfo.loanAmount !=
                this.mainVoucherInfo.lendAmount
            ) {
                this.$alert("借贷不平，无法进行保存", "提示", {
                    confirmButtonText: "确定",
                    callback: action => {}
                });
            } else {
                let certificateDetailList = [];
                this.detailVouchers.forEach((value, index) => {
                    if (index < this.detailVouchers.length - 1) {
                        certificateDetailList.push({
                            accountTitle: value.accountTitle.name,
                            accountCalculation: value.accountCalculation,
                            department: value.department,
                            employee: value.employeeAccount,
                            product: value.project,
                            budgetarySubject: value.budgetarySubject,
                            accountType: value.category.code,
                            originalCurrency: value.originalCurrency * 100,
                            project: value.project,
                            valueChain: value.valueChain,
                            region: value.area,
                            customerGroup: value.customerGroup,
                            cashFlow: parseFloat(value.cashFlow) * 100,
                            note: value.desc
                        });
                    }
                });
                var certificate = {
                    lendAmount: this.mainVoucherInfo.lendAmount * 100,
                    loanAmount: this.mainVoucherInfo.loanAmount * 100,
                    baseMoney: this.mainVoucherInfo.baseMoney,
                    exchange: this.mainVoucherInfo.exchange,
                    accountPeriod: this.mainVoucherInfo.accountPeriod,
                    note: this.mainVoucherInfo.note,
                    certificateDetailList: certificateDetailList
                };
                var _this = this;
                let param = new URLSearchParams();
                param.append("certificate", JSON.stringify(certificate));
                _this.$axios
                    .post("/certificates", param, {
                        validateStatus: function(status) {
                            return status == 200;
                        }
                    })
                    .then(function(response) {
                        debugger;
                        var body = response.data;
                        if (body.code == 200) {
                            _this.mainVoucherInfo.serial = body.data.certificate.serial;
                            _this.$message({
                                message: "保存成功",
                                type: "success"
                            });
                            this.enableBtnFunction = true;
                        } else {
                            _this.$message({
                                message: "保存失败，" + body.msg,
                                type: "error"
                            });
                        }
                        console.log(response);
                    })
                    .catch(function(error) {
                        debugger;
                        console.log(error);
                    });
            }
        },
        // 查找雇员信息
        searchEmployee() {
            var _this = this;
            _this.employeeSearching = true;
            _this.$axios
                .get(
                    "/user/" +
                        _this.selectedDetailVoucherInfo.employeeAccount +
                        "/info",
                    {
                        validateStatus: function(status) {
                            return status == 200;
                        }
                    }
                )
                .then(function(response) {
                    _this.employeeSearching = false;
                    var body = response.data;
                    if (body.code == 200) {
                        var employee = body.data.user;
                        _this.selectedDetailVoucherInfo.employeeAccount =
                            employee.displayName +
                            "(" +
                            employee.domainID +
                            ")";
                        _this.selectedDetailVoucherInfo.department =
                            employee.deptName;
                        _this.selectedDetailVoucherInfo.employee = employee;
                    }
                })
                .catch(function(error) {
                    _this.employeeSearching = false;
                    console.log(error);
                });
        },

        // 币种变化时间
        exchangeRateChange(selected) {
            this.exchangeRates.forEach((item, index) => {
                if (item.code == selected) {
                    this.mainVoucherInfo.exchange = item.rate;
                }
            });
            console.log(this.detailVoucherInfo);
        },

        // 取消添加详细点击事件
        cancelDetailClick() {
            this.detailDialogVisible = false;
        },
        // 确认添加详细点击事件
        confirmDetailClick() {
            this.detailDialogVisible = false;
            // 添加一条详细信息到列表尾部
            if (
                this.selectedDetailVoucherIndex ==
                this.detailVouchers.length - 1
            ) {
                this.detailVouchers.splice(
                    this.detailVouchers.length - 1,
                    0,
                    this.selectedDetailVoucherInfo
                );
            } else {
                this.detailVouchers.splice(
                    this.selectedDetailVoucherIndex,
                    1,
                    this.selectedDetailVoucherInfo
                );
            }
            this.checkBalance();
            console.log(this.detailVouchers);
        },

        checkBalance() {
            var _this = this;
            var validateItems = [];
            _this.detailVouchers.forEach((val, index) => {
                if (index < _this.detailVouchers.length - 1) {
                    // 金钱单位是按分传递，但显示的时候是元
                    validateItems.push({
                        accountType: val.category.code,
                        originalCurrency: val.originalCurrency * 1000
                    });
                }
            });
            let param = new URLSearchParams();
            param.append(
                "certificate",
                JSON.stringify({ certificateDetailList: validateItems })
            );
            _this.$axios
                .post("/certificate/balance", param, {
                    validateStatus: function(status) {
                        return status == 200;
                    }
                })
                .then(function(response) {
                    debugger;
                    var body = response.data;
                    if (body.code == 200) {
                        let certificate = body.data.certificate;
                        _this.mainVoucherInfo.lendAmount =
                            certificate.lendAmount / 1000;
                        _this.mainVoucherInfo.loanAmount =
                            certificate.loanAmount / 1000;
                    }
                    console.log(response);
                })
                .catch(function(error) {
                    debugger;
                    console.log(error);
                });
        },

        // 凭证列表选择按钮
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //凭证列表过滤按钮
        filterHandler(value, row, column) {
            debugger;
            const property = column["property"];
            return row[property] === value;
        },
        // 凭证列表搜索按钮
        search() {
            // TODO search modal
        },
        // 显示新建凭证对话框
        showCreateDialog() {
            this.dialogVisible = true;
        },
        // 双击新建凭证表格行弹出详细对话框
        showDetailDialog(row, event) {
            debugger;
            this.detailVouchers.forEach((val, index) => {
                if (val == row) {
                    this.selectedDetailVoucherIndex = index;
                }
            });
            this.selectedDetailVoucherInfo = JSON.parse(JSON.stringify(row));
            this.detailDialogVisible = true;
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.create-button-box {
    margin-bottom: 20px;
}

.handle-box-title {
    margin-bottom: 10px;
}
.title {
    font-size: 16px;
    font-weight: bold;
    color: rgba(102, 102, 102, 1);
    line-height: 14px;
}

.handle-input {
    width: 300px;
    margin-left: 10px;
    margin-right: 5px;
    display: inline-block;
}

.grid-content {
    margin-bottom: 10px;
    border-radius: 4px;
    min-height: 36px;
}

.example-p {
    height: 45px;
    display: flex;
    align-items: center;
}
.search-box {
    text-align: center;
    margin-top: 10px;
}
.search {
    width: 300px;
}
/* .no-border >>> .el-input__inner {
    border: 0px;
} */
/* .form-grid-content {
    padding: 10px;
    height: 50px;
    text-align: center;
    border: 1px solid #ccc;
} */
</style>